<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 折线图示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var data = [3000,2800,900,1000,800,700,1400,1300,900,1000,800,600];
        var maxValue = Math.max(...data);
        var minValue = Math.min(...data);
        var avgValue = data.reduce((a, b) => a + b, 0) / data.length;
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '折线图示例'
            },
            tooltip: {
                trigger: 'axis' // 触发类型，默认数据触发，可选为：'item'、'axis'
            },
            legend: {
                data:['销量'] // 图例名称
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'] // x轴数据
            },
            yAxis: {
                type: 'value',
                scale: true, // 脱离0值比例
                splitLine: {
                    show: false
                }
            },
            series: [
                {
                    name: '销量', // 系列名称
                    type: 'line', // 图表类型
                    smooth: true, // 平滑线条
                    stack: '总量', // 堆叠图
                    areaStyle: { // 填充风格
                        color: 'rgba(220, 220, 220, 0.3)'
                    },
                    smooth: true, // 平滑线条
                    stack: '总量', // 堆叠图
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0, color: 'rgba(220, 220, 220, 0.8)'
                            }, {
                                offset: 1, color: 'red'
                            }]),
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowBlur: 10
                        }
                    },
                    data: data,
                    markPoint: { // 标记最大值、最小值、平均值
                        data: [
                            {type: 'max', name: '最大值:' + maxValue.toFixed(2)},       
                            {type: 'min', name: '最小值:' + minValue.toFixed(2)},
                        
                        ]
                    },
                    markLine: { // 标注区间
                        silent: true,
                        data: [
                            {
                                yAxis: minValue,
                                name: 'Y = 最小值'
                            },
                            {
                                yAxis: maxValue,
                                name: 'Y = 最大值'
                            }
                        ]
                    }

                }
                
            ]

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>